<template>
  <div class="alarmSet">
    <div>
      <el-select v-model="value" @change="optionsChange">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
    <div v-if="value==='0'">
      <div class="alarmSet-con">
        <el-row>
          <el-col class="line" :span="6">一般告警：</el-col>
          <el-col :span="8">
            <el-input v-model="formData.ybgj1" style="width: 100%;"></el-input>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="8">
            <el-input v-model="formData.ybgj2" style="width: 100%;"></el-input>
          </el-col>
        </el-row>
      </div>
      <div class="alarmSet-con">
        <el-row>
          <el-col class="line" :span="6">严重告警：</el-col>
          <el-col :span="8">
            <el-input v-model="formData.yzgj1" style="width: 100%;"></el-input>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="8">
            <el-input v-model="formData.yzgj2" style="width: 100%;"></el-input>
          </el-col>
        </el-row>
      </div>
      <div class="alarmSet-con">
        <el-row>
          <el-col class="line" :span="6">危急告警：</el-col>
          <el-col :span="8">
            <el-input v-model="formData.wjgj1" style="width: 100%;"></el-input>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="8">
            <el-input v-model="formData.wjgj2" style="width: 100%;"></el-input>
          </el-col>
        </el-row>
      </div>
    </div>
    <div v-if="value==='1'" class="ztl">
      <el-radio v-model="gj" label="一般告警">一般告警</el-radio>
      <el-radio v-model="gj" label="严重告警">严重告警</el-radio>
      <el-radio v-model="gj" label="危急告警">危急告警</el-radio>
    </div>
    <div class="alarmSet-btn">
      <el-button class="table-query" type="primary" @click="submitForm">保存</el-button>
      <el-button class="table-query" type="primary" @click="clsoe">取消</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

@Component
export default class alarmSet extends Vue {
  @Prop() sz: any;
  options = [
    {
      value: "0",
      label: "数值类",
    },
    {
      value: "1",
      label: "状态类",
    },
  ];
  //告警值
  formData: any = {
    ybgj1: "",
    ybgj2: "",
    yzgj1: "",
    yzgj2: "",
    wjgj1: "",
    wjgj2: "",
  };

  value = "0";
  //告警状态
  gj = "一般告警";
  submitForm() {
    if (this.value === "1") {
      var valState;
      var fromObj = {
        type: "",
        pointerid: this.sz.ID,
      };
      switch (this.gj) {
        case "一般告警":
          fromObj.type = "2";

          break;
        case "严重告警":
          fromObj.type = "4";

          break;
        case "危急告警":
          fromObj.type = "6";
          break;
        default:
          fromObj.type = "";
          break;
      }
      // console.log(fromObj);
      let form = [];
      form.push(fromObj);
      (this as any).$services
        .setWarn({ data: form, method: "post" })
        .then((result: any) => {
          // console.log(result);
          if (result.code === 200) {
            this.$message({
              type: "success",
              message: `${result.message}`,
            });
          } else {
            this.$message({
              type: "error",
              message: "操作失败!",
            });
          }
           this.$emit("inithandle");
        })
        .catch((err: object) => {
          console.log(err);
        });
    } else {
      let form = [];
      var obj1 = {
        lower: this.formData.ybgj1 || "",
        upper: this.formData.ybgj2 || "",
        pointerid: this.sz.ID,
        type: "1",
      };
      var obj2 = {
        lower: this.formData.yzgj1 || "",
        upper: this.formData.yzgj2 || "",
        pointerid: this.sz.ID,
        type: "3",
      };
      var obj3 = {
        lower: this.formData.wjgj1 || "",
        upper: this.formData.wjgj2 || "",
        pointerid: this.sz.ID,
        type: "5",
      };
      form.push(obj1);
      form.push(obj2);
      form.push(obj3);
      // console.log(form);
      (this as any).$services
        .setWarn({ data: form, method: "post" })
        .then((result: any) => {
          // console.log(result);
          if (result.code === 200) {
            this.$message({
              type: "success",
              message: `${result.message}`,
            });
          } else {
            this.$message({
              type: "error",
              message: "操作失败!",
            });
          }
         this.$emit("inithandle");
        })
        .catch((err: object) => {
          console.log(err);
        });
    }
  }
  clsoe() {
    this.$emit("close");
  }
  //切换
  optionsChange() {
    this.formData = {};
    this.gj = "一般告警";
  }
}
</script>

<style lang="scss" scoped>
.alarmSet {
  width: 100%;
  .line {
    text-align: center;
    line-height: 0.38rem;
  }
  &-con {
    margin-top: 15px;
  }
  &-btn {
    display: flex;
    margin-top: 15px;
    justify-content: center;
  }
  .ztl {
    height: 120px;
    .el-radio {
      width: 100%;
      margin: 14px 10px 14px 0px;
    }
  }
}
</style>

